<template>
  <el-dialog :title="title" v-model="editorDialog" width="35%">
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
      />
    </div>
    <template #footer>
      <el-button type="primary" size="default" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { bus } from '@/utils/mitt'
import { getCompanyIntroduceAPI, updateCompanyIntroduceAPI } from '@/api/company'
import { ElMessage } from 'element-plus'
import { tracking } from '@/utils/operation'
import { useUserStore } from '@/stores/user'
const userInfo = useUserStore().UserInfo

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 弹窗
const editorDialog = ref(false)
// 弹窗标题
const title = ref('')

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      //上传图片配置
      server: 'http://127.0.0.1:3000/set/uploadCompanyPicture', //上传接口地址
      fieldName: 'file', //上传文件名
      methods: 'post',
      metaWithUrl: true, // 参数拼接到 url 上
      // 单个文件上传成功之后
      // onSuccess(file, res) {
      // },
      // 自定义插入图片
      customInsert(res, insertFn) {
        insertFn(res.url)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

bus.on('editorTitle', async (id) => {
  const res = await getCompanyIntroduceAPI()
  if (id == 1) {
    title.value = '编辑公司介绍'
    valueHtml.value = res.data[id].set_value
    tracking('', userInfo?.name, '公司信息', '中级', `编辑公司介绍`)
  }
  if (id == 2) {
    title.value = '编辑公司架构'
    valueHtml.value = res.data[id].set_value
    tracking('', userInfo?.name, '公司信息', '中级', `编辑公司架构`)
  }
  if (id == 3) {
    title.value = '编辑公司战略'
    valueHtml.value = res.data[id].set_value
    tracking('', userInfo?.name, '公司信息', '中级', `编辑公司战略`)
  }
  if (id == 4) {
    title.value = '编辑公司高层'
    valueHtml.value = res.data[id].set_value
    tracking('', userInfo?.name, '公司信息', '中级', `编辑公司高层`)
  }
})

// 打开编辑器
const open = () => {
  editorDialog.value = true
}

toolbarConfig.excludeKeys = [
  'blockquote',
  'bgColor',
  'color',
  'group-more-style',
  'fontFamily',
  'bulletedList',
  'numberedList',
  'lineHeight',
  'todo',
  'emotion',
  'insertLink',
  'group-video',
  'insertTable',
  'codeBlock',
  'divider',
  'fullScreen',
  'group-image'

  // 排除菜单组，写菜单组 key 的值即可
]

const submit = async () => {
  await updateCompanyIntroduceAPI(valueHtml.value, title.value.slice(-4))
  editorDialog.value = false
  ElMessage({ type: 'success', message: '修改成功' })
}

defineExpose({ open })

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 模拟 ajax 异步获取内容
onMounted(() => {})
</script>

<style scoped lang="scss"></style>
